<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
				<fieldset id="">
					<legend>请添加员工信息</legend>
					<label>姓名：</label><input type="text" v-model.trim="name" /><br>
					<label>年龄：</label><input type="text" v-model.number="age" /><br>
					<label>性别：</label><select v-model="sex">
						<option >男</option>
						<option>女</option>
					</select><br>
					<button type="button" @click="add">添加</button>
				</fieldset>
				<table cellspacing="10" cellpadding="10">
				  <thead>
				    <th>姓名</th>
				    <th>年龄</th>
				    <th>性别</th>
					<th>操作</th>
				  </thead>
				  <tbody>
				    <!-- tr为行 td为列，我们来循环到tr-->
				    <tr v-for="(arr,index) in info_arr">
				      <td>{{arr.name}}</td>
				      <td>{{arr.age}}</td>
				      <td>{{arr.sex}}</td>
				      <td><button type="button" @click="delect(index)"> {{arr.cz}}</button></td>
				    </tr>
				  </tbody>
				</table>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					name:"",
					age:"",
					sex:"男",
					Staff:"",
					info_arr:[]//定义数组将添加的数据先存入
				},
				methods: {
				    add: function() {
				        this.Staff={
							name:this.name,
							age:this.age,
							sex:this.sex,
							cz:"删除"
						};
						this.info_arr.push(this.Staff)//追加到数组
				    },
					delect:function(index){
							this.info_arr.splice(index,1);//法一
							// 法二
							// 使用v-show或v-if
					}
				}
			
			})
		</script>
	</body>
</html>
